<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>用户注册</title>
<link rel="stylesheet" type="text/css" href="/css/admin.css">
<head th:include="include :: header"></head>
<style>
    #nc_1_n1z
    {
        height: 34px;
    }
    #your-dom-id
    {
        margin-top: 8px;
        margin-bottom: 8px;
    }
    .nc_scale div.nc_bg
    {
        background: #4AC2A9!important; /* 滑过时的背景色 */
    }
    .nc_scale .btn_ok
    {
        color: #39AFE9!important;
    }
    ._nc .stage1 .slider
    {
        border-radius: 5px;
    }
    ._nc .stage1 .track div
    {
        border-radius: 5px;
    }
</style>
<body>
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/api.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/nc.js"></script>
<div class="mainbg2">
    <div class="loginbox">
        <img src="../img/logo.png" class="logo">
        <div class="logcont">
            <h1>用户注册</h1>
            <div id="main1" class="logbd">
                <form id="signupForm">
                    <div class="regiterTree">
                        <div id="jstree"></div>
                    </div>
                    <dl class="block">
                        <div class="formcont">
                            <input id="name" name="name" type="text" class="bdbox fullname" placeholder="姓名">
                        </div>
                        <div class="formcont">
                            <input id="username" name="username" type="text" class="bdbox name" placeholder="账号" onchange="checkUserName();">
                        </div>
                        <div class="formcont">
                            <input id="password" name="password" type="password" class="bdbox mm" placeholder="输入密码">
                        </div>
                        <div class="formcont">
                            <input id="password2" name="password2" type="password" class="bdbox mm" placeholder="确认密码" onkeyup="illeagalPassword()">
                        </div>
                        <div class="formcont">
                            <input type="hidden" id="deptId" name="deptId"/>
                            <input id="deptName" name="deptName" type="text" readonly class="bdbox department" placeholder="请选择所属部门" onclick="openDept()">
                        </div>
                        <input type="hidden" name="roleIds" value="3">
                        <input type="hidden" name="status" value="1">
                        <div id="your-dom-id" class="nc-container"></div>
                        <input style="display: none" id="isSlideOK" name="isSlideOK" value="0">

                        <div class="formcont">
                            <input href="index.html" class="btn_big" value="立即注册" type="button" style="height: 40px;font-size: 18px" name="submit_register" onclick="registerSubmit()">
                            <input type="submit" style="display:none;" id="register" name="register">
                        </div>

                        <div class="formcont">
                            <span class="fr">已有账号？<a href="/login">直接登录</a></span>
                        </div>
                    </dl>
                </form>
            </div>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<script>

    function checkUserName() {
        var username=document.getElementById("username").value;
        if (username != '') {
            $.ajax({
                type : "POST",
                url : "/sys/user/exit",
                data : {"username": username},// 你的formid
                async : false,
                success : function(data) {
                    if(data != true) {
                        layer.msg("当前账号已存在");
                        $("#username").val("");
                        return;
                    }
                }
            });
        }
    }

    function registerSubmit() {
        var name=document.getElementById("name").value;
        if (name == '') {
            layer.msg("姓名不能为空！");
            return;
        }
        var username=document.getElementById("username").value;
        if (username == '') {
            layer.msg("账号不能为空！");
            return;
        }
        if (username.indexOf(" ")!=-1) {
            layer.msg("账号中不能含有空格！");
            return;
        }
        var password=document.getElementById("password").value;
        if (password == '') {
            layer.msg("密码不能为空！");
            return;
        }
        var password2=document.getElementById("password2").value;
        if (password2 == '') {
            layer.msg("确认密码不能为空！");
            return;
        }
        if(password != password2) {
            layer.msg("两次密码不一致！");
            return;
        }
        var deptId=document.getElementById("deptId").value;
        if (deptId == '') {
            layer.msg("部门不能为空！");
            return;
        }
        var isSlideOK=document.getElementById("isSlideOK").value;
        if (isSlideOK!=1) {
            layer.msg("请进行验证，然后注册！");
            return;
        }
        $.ajax({
            cache : true,
            type : "POST",
            url : "/sys/user/saveFront",
            data : $('#signupForm').serialize(),// 你的formid
            async : false,
            error : function(request) {
                parent.layer.alert("Connection error");
            },
            success : function(data) {
                if (data.code == 0) {
                    parent.layer.alert("注册成功");
                    setTimeout(function (){
                        window.location.href = "/login";
                    }, 3000);
                } else {
                    parent.layer.alert(data.msg)
                }
            }
        });
    }

    var openDept = function(){
        layer.open({
            type:2,
            title:"选择部门",
            area : [ '300px', '450px' ],
            content:"/system/sysDept/treeView"
        })
    }
    function loadDept( deptId,deptName){
        $("#deptId").val(deptId);
        $("#deptName").val(deptName);
    }
</script>

<script type="text/javascript">
    var nc_token = ["CF_APP_1", (new Date()).getTime(), Math.random()].join(':');
    var NC_Opt =
        {
            renderTo: "#your-dom-id",
            appkey: "CF_APP_1",
            scene: "register",
            token: nc_token,
            customWidth: 330,
            trans:{"key1":"code0"},
            elementID: ["usernameID"],
            is_Opt: 0,
            language: "cn",
            isEnabled: true,
            timeout: 3000,
            times:5,
            apimap: {
                // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
                // 'get_captcha': '//b.com/get_captcha/ver3',
                // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
                // 'get_img': '//c.com/get_img',
                // 'checkcode': '//d.com/captcha/checkcode.jsonp',
                // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
                // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
                // 'umid_serUrl': 'https://g.com/service/um.json'
            },
            /*
            验证通过时触发这个回调方法
            只要通过验证，就设置一个隐藏的input值
             */
            callback: function (data) {
                // window.console && console.log(nc_token)
                // window.console && console.log(data.csessionid)
                // window.console && console.log(data.sig)
                document.getElementById("isSlideOK").value=1;
            }
        }
    var nc = new noCaptcha(NC_Opt)
    nc.upLang('cn', {
        _startTEXT: "请按住滑块，拖动到最右边",
        _yesTEXT: "验证通过",
        _error300: "哎呀，出错了，点击<a href=\"javascript:__nc.reset()\">刷新</a>再来一次",
        _errorNetwork: "网络不给力，请<a href=\"javascript:__nc.reset()\">点击刷新</a>",
    })
</script>

</body>
</html>